<template>
  <div>
    <CategoryList :isCheckSelect="!isShowAttrList"></CategoryList>
    <el-card style="margin-top: 10px">
      <div v-if="isShowAttrList">
        <el-button
          type="primary"
          :icon="Plus"
          :disabled="!categoryStore.category3Id"
          @click="toSaveAttrValue"
          style="margin-bottom: 8px"
          >添加商品</el-button
        >
        <el-table :data="attrList" border style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
          />
          <el-table-column prop="attrName" label="属性名称" />
          <el-table-column label="属性值列表">
            <template #default="{ row }">
              <el-tag
                v-for="attrValue in row.attrValueList"
                :key="attrValue.id"
                style="margin-right: 8px"
                >{{ attrValue.valueName }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button
                size="small"
                type="warning"
                :icon="Edit"
                @click="toEditAttr(row)"
              />
              <el-popconfirm
                title="你确定要删除此条数据吗?"
                @confirm="confirmAttrInfo(row.id)"
              >
                <template #reference>
                  <el-button size="small" type="danger" :icon="Delete" />
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-else>
        <el-form>
          <el-form-item label="属性名" style="width: 300px">
            <el-input
              placeholder="请输入属性名"
              v-model="attrInfo.attrName"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :disabled="!attrInfo.attrName"
              :icon="Plus"
              @click="addAttrValue"
              >添加属性值</el-button
            >
          </el-form-item>
        </el-form>
        <el-table :data="attrInfo.attrValueList" border style="margin: 10px 0">
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
          />
          <el-table-column label="属性值名称">
            <template v-slot="{ row, $index }">
              <div v-if="row.isShowInput">
                <el-input
                  ref="refInput"
                  v-model="row.valueName"
                  @blur="deleteCurrentRow(row, $index)"
                  @keydown.enter="deleteCurrentRow(row, $index)"
                ></el-input>
              </div>
              <div v-else>
                <span @dblclick="toEditAttrValue(row)" style="display: block">{{
                  row.valueName
                }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row, $index }">
              <el-popconfirm
                title="你确定要删除此条数据吗?"
                @confirm="confirmAttrValueInfo($index)"
              >
                <template #reference>
                  <el-button size="small" type="danger" :icon="Delete" />
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-button
          type="primary"
          @click="saveAttrInfo"
          :disabled="!attrInfo.attrValueList.length"
          >保存</el-button
        >
        <el-button @click="isShowAttrList = true">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
import CategoryList from "@/components/CategoryList/index"
export default {
  name: "Attr",
  components: { CategoryList },
}
</script>

<script lang="ts" setup>
import { ref, watch, reactive, nextTick } from "vue"
import { Plus, Edit, Delete } from "@element-plus/icons-vue"
import { ElMessage } from "element-plus"
import { useCategoryListStore } from "@/stores/categoryList"
import {
  reqGetAttrInfoList,
  reqDeleteAttrInfo,
  reqAddOrUpdateAttrInfo,
} from "@/api/product/attr"
import type {
  AttrInfoModel,
  AttrListModel,
  AttrValueModel,
} from "@/api/product/model/attrModel"

const categoryStore = useCategoryListStore()
const isShowAttrList = ref<boolean>(true)
const attrList = ref<AttrListModel>([])
const refInput = ref<HTMLInputElement>()

const attrInfo = reactive<AttrInfoModel>({
  attrName: "",
  attrValueList: [],
  categoryId: -1,
  categoryLevel: 3,
})

// 1.封装获取属性列表信息的接口函数
const getAttrInfoList = async () => {
  attrList.value = await reqGetAttrInfoList(categoryStore)
}

// 2.监视三级分类，如果选取了就渲染数据
watch(
  () => {
    return categoryStore.category3Id
  },
  async category3Id => {
    if (!category3Id) return (attrList.value = [])
    getAttrInfoList()
  },
  { immediate: true }
)

// 3.删除属性
const confirmAttrInfo = async (id: number) => {
  await reqDeleteAttrInfo(id)
  ElMessage.success("数据删除成功！")
  getAttrInfoList()
}

// 4. 添加属性值
const addAttrValue = () => {
  attrInfo.attrValueList.push({
    valueName: "", // 要添加的具体的属性值
    attrId: attrInfo.id, // 更新的时候才会用到 这一项当前来说可以不写
    isShowInput: true, // 是不是显示输入框 或是显示span标签
  })

  nextTick(() => {
    refInput.value?.focus()
  })
}

// 5. 失去焦点时 删除当前没有属性值的那一项
const deleteCurrentRow = (row: AttrValueModel, index: number) => {
  if (!row.valueName) return attrInfo.attrValueList.splice(index, 1)
  row.isShowInput = false
}

// 6.删除属性值
const confirmAttrValueInfo = (index: number) => {
  attrInfo.attrValueList.splice(index, 1)
}

// 7.编辑属性值
const toEditAttrValue = (row: AttrValueModel) => {
  row.isShowInput = true

  nextTick(() => {
    refInput.value?.focus()
  })
}

// 8. 添加属性值时，清空原来的旧值
const toSaveAttrValue = () => {
  isShowAttrList.value = false

  attrInfo.attrName = ""
  attrInfo.attrValueList = []
  delete attrInfo.id
}

// 9. 添加属性  或是更新属性，也是执行的这个事件处理程序
const saveAttrInfo = async () => {
  attrInfo.categoryId = categoryStore.category3Id
  await reqAddOrUpdateAttrInfo(attrInfo)
  ElMessage.success("数据添加成功！")
  isShowAttrList.value = true
  getAttrInfoList()
}

// 10. 编辑属性之数据回显
const toEditAttr = (row: AttrValueModel) => {
  isShowAttrList.value = false
  Object.assign(attrInfo, row)
}
</script>

<style></style>
